<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>联系客服 - 邦伴用户端</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <style>
    :root {
      --primary: #ff7e2d;
      --primary-light: #fff3ea;
      --border: #f0f0f0;
      --text-main: #222;
      --text-sub: #888;
    }
    
    body {
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      background-color: #f8f8f8;
      color: var(--text-main);
    }
    
    .app-container {
      width: 375px;
      height: 812px;
      margin: 0 auto;
      background: #fff;
      position: relative;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
      overflow-y: auto;
    }
    
    .primary-color {
      color: var(--primary);
    }
    
    .primary-bg {
      background-color: var(--primary);
    }
    
    .primary-light-bg {
      background-color: var(--primary-light);
    }
    
    .btn-primary {
      background-color: var(--primary);
      color: white;
    }
    
    .btn-outline {
      border: 1px solid var(--primary);
      color: var(--primary);
    }
    
    .card {
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    
    .service-card {
      border-radius: 12px;
      border: 1px solid var(--border);
      padding: 16px;
      margin-bottom: 16px;
      background-color: white;
      display: flex;
      align-items: center;
    }
    
    .service-icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background-color: var(--primary-light);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      font-size: 20px;
    }
    
    .chat-container {
      height: calc(100% - 120px);
      overflow-y: auto;
      padding: 16px;
    }
    
    .chat-bubble {
      max-width: 70%;
      padding: 12px;
      border-radius: 12px;
      margin-bottom: 16px;
      position: relative;
      word-wrap: break-word;
    }
    
    .chat-bubble.user {
      background-color: var(--primary);
      color: white;
      margin-left: auto;
      border-bottom-right-radius: 4px;
    }
    
    .chat-bubble.bot {
      background-color: #f1f1f1;
      color: var(--text-main);
      margin-right: auto;
      border-bottom-left-radius: 4px;
    }
    
    .chat-input {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 16px;
      background-color: white;
      border-top: 1px solid var(--border);
    }
    
    .input-box {
      display: flex;
      align-items: center;
      background-color: #f5f5f5;
      border-radius: 24px;
      padding: 8px 16px;
    }
    
    .input-box input {
      flex: 1;
      border: none;
      background-color: transparent;
      padding: 8px 0;
      outline: none;
    }
    
    .faq-item {
      border-bottom: 1px solid var(--border);
      padding: 16px 0;
    }
    
    .faq-question {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
    }
    
    .faq-answer {
      padding-top: 12px;
      display: none;
      color: var(--text-sub);
      font-size: 14px;
      line-height: 1.6;
    }
    
    .faq-answer.active {
      display: block;
    }
  </style>
</head>
<body>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <div class="sticky top-0 z-10 bg-white border-b border-gray-100 px-4 py-3 flex items-center">
      <a href="javascript:history.back()" class="mr-2">
        <i class="fas fa-arrow-left text-lg"></i>
      </a>
      <h1 class="text-lg font-medium flex-1 text-center">联系客服</h1>
    </div>
    
    <!-- 客服选项 -->
    <div class="p-4">
      <h2 class="text-base font-medium mb-3">联系方式</h2>
      
      <!-- 在线客服 -->
      <a href="#chat" class="service-card">
        <div class="service-icon">
          <i class="fas fa-headset"></i>
        </div>
        <div class="flex-1">
          <h3 class="font-medium mb-1">在线客服</h3>
          <p class="text-xs text-gray-500">工作时间：9:00-20:00</p>
        </div>
        <i class="fas fa-chevron-right text-gray-300"></i>
      </a>
      
      <!-- 电话客服 -->
      <a href="tel:400-123-4567" class="service-card">
        <div class="service-icon">
          <i class="fas fa-phone-alt"></i>
        </div>
        <div class="flex-1">
          <h3 class="font-medium mb-1">电话客服</h3>
          <p class="text-xs text-gray-500">400-123-4567（9:00-20:00）</p>
        </div>
        <i class="fas fa-chevron-right text-gray-300"></i>
      </a>
      
      <!-- 微信客服 -->
      <div class="service-card" id="wechatService">
        <div class="service-icon">
          <i class="fab fa-weixin"></i>
        </div>
        <div class="flex-1">
          <h3 class="font-medium mb-1">微信客服</h3>
          <p class="text-xs text-gray-500">扫描二维码添加客服微信</p>
        </div>
        <i class="fas fa-qrcode text-gray-500"></i>
      </div>
    </div>
    
    <!-- 常见问题 -->
    <div class="px-4 py-3">
      <h2 class="text-base font-medium mb-3">常见问题</h2>
      
      <div class="faq-list">
        <div class="faq-item">
          <div class="faq-question">
            <h3 class="font-medium">如何申请退款？</h3>
            <i class="fas fa-chevron-down text-gray-400"></i>
          </div>
          <div class="faq-answer">
            <p>您可以在"我的订单"中找到需要退款的订单，点击"申请退款"按钮，填写退款原因后提交申请。我们的客服人员会在24小时内处理您的退款申请。</p>
          </div>
        </div>
        
        <div class="faq-item">
          <div class="faq-question">
            <h3 class="font-medium">如何修改订单信息？</h3>
            <i class="fas fa-chevron-down text-gray-400"></i>
          </div>
          <div class="faq-answer">
            <p>订单提交后，如需修改订单信息（如服务时间、地址等），请尽快联系在线客服或拨打客服电话400-123-4567。已开始服务的订单可能无法修改，请理解。</p>
          </div>
        </div>
        
        <div class="faq-item">
          <div class="faq-question">
            <h3 class="font-medium">如何投诉服务人员？</h3>
            <i class="fas fa-chevron-down text-gray-400"></i>
          </div>
          <div class="faq-answer">
            <p>如果您对服务人员的服务不满意，可以在订单详情页点击"投诉"按钮，或直接联系客服进行投诉。我们会认真处理每一个投诉，并在48小时内给您回复。</p>
          </div>
        </div>
        
        <div class="faq-item">
          <div class="faq-question">
            <h3 class="font-medium">如何成为会员？</h3>
            <i class="fas fa-chevron-down text-gray-400"></i>
          </div>
          <div class="faq-answer">
            <p>您可以在"个人中心"页面点击"会员中心"，选择适合您的会员套餐进行购买。成为会员后，您将享受专属折扣、积分加速和更多特权服务。</p>
          </div>
        </div>
        
        <div class="faq-item">
          <div class="faq-question">
            <h3 class="font-medium">如何使用优惠券？</h3>
            <i class="fas fa-chevron-down text-gray-400"></i>
          </div>
          <div class="faq-answer">
            <p>下单时在确认订单页面，系统会自动显示可用的优惠券。您也可以点击"使用优惠券"手动选择想要使用的优惠券。请注意查看每张优惠券的使用条件和有效期。</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 微信二维码弹窗 -->
    <div id="wechatModal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center z-50">
      <div class="bg-white rounded-lg w-72 overflow-hidden">
        <div class="p-4 text-center">
          <h3 class="font-medium mb-4">微信客服</h3>
          <div class="w-48 h-48 mx-auto bg-gray-200 flex items-center justify-center mb-4">
            <i class="fas fa-qrcode text-6xl text-gray-400"></i>
            <!-- 实际使用时替换为真实二维码图片 -->
            <!-- <img src="qrcode.jpg" alt="微信客服二维码" class="w-full h-full"> -->
          </div>
          <p class="text-sm text-gray-500 mb-2">扫描上方二维码</p>
          <p class="text-sm text-gray-500">添加客服微信号：bangban-service</p>
        </div>
        <div class="border-t border-gray-100">
          <button id="closeWechat" class="w-full py-3 text-center primary-color">关闭</button>
        </div>
      </div>
    </div>
    
    <!-- 在线聊天界面 -->
    <div id="chatInterface" class="fixed inset-0 bg-white z-50 hidden">
      <!-- 聊天顶部导航栏 -->
      <div class="sticky top-0 z-10 bg-white border-b border-gray-100 px-4 py-3 flex items-center">
        <button id="closeChat" class="mr-2">
          <i class="fas fa-arrow-left text-lg"></i>
        </button>
        <h1 class="text-lg font-medium flex-1 text-center">在线客服</h1>
      </div>
      
      <!-- 聊天内容区域 -->
      <div class="chat-container" id="chatMessages">
        <div class="chat-bubble bot">
          <p>您好，我是邦伴客服小邦，很高兴为您服务！请问有什么可以帮助您的？</p>
        </div>
        
        <!-- 快捷问题 -->
        <div class="flex flex-wrap gap-2 mb-4">
          <button class="quick-question px-3 py-1 text-xs border border-gray-200 rounded-full">如何申请退款？</button>
          <button class="quick-question px-3 py-1 text-xs border border-gray-200 rounded-full">修改订单信息</button>
          <button class="quick-question px-3 py-1 text-xs border border-gray-200 rounded-full">服务人员未按时到达</button>
          <button class="quick-question px-3 py-1 text-xs border border-gray-200 rounded-full">会员特权咨询</button>
        </div>
      </div>
      
      <!-- 聊天输入框 -->
      <div class="chat-input">
        <div class="input-box">
          <i class="fas fa-plus text-gray-400 mr-2"></i>
          <input type="text" id="messageInput" placeholder="请输入您的问题...">
          <button id="sendMessage" class="ml-2 primary-color">发送</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 常见问题展开/收起
      const faqQuestions = document.querySelectorAll('.faq-question');
      
      faqQuestions.forEach(question => {
        question.addEventListener('click', function() {
          const answer = this.nextElementSibling;
          const icon = this.querySelector('i');
          
          // 切换显示状态
          answer.classList.toggle('active');
          
          // 切换图标
          if (answer.classList.contains('active')) {
            icon.classList.remove('fa-chevron-down');
            icon.classList.add('fa-chevron-up');
          } else {
            icon.classList.remove('fa-chevron-up');
            icon.classList.add('fa-chevron-down');
          }
        });
      });
      
      // 微信二维码弹窗
      const wechatService = document.getElementById('wechatService');
      const wechatModal = document.getElementById('wechatModal');
      const closeWechat = document.getElementById('closeWechat');
      
      wechatService.addEventListener('click', function() {
        wechatModal.classList.remove('hidden');
        wechatModal.classList.add('flex');
      });
      
      closeWechat.addEventListener('click', function() {
        wechatModal.classList.add('hidden');
        wechatModal.classList.remove('flex');
      });
      
      // 点击弹窗外部关闭
      wechatModal.addEventListener('click', function(e) {
        if (e.target === wechatModal) {
          closeWechat.click();
        }
      });
      
      // 在线聊天界面
      const chatLink = document.querySelector('a[href="#chat"]');
      const chatInterface = document.getElementById('chatInterface');
      const closeChat = document.getElementById('closeChat');
      const messageInput = document.getElementById('messageInput');
      const sendMessage = document.getElementById('sendMessage');
      const chatMessages = document.getElementById('chatMessages');
      const quickQuestions = document.querySelectorAll('.quick-question');
      
      chatLink.addEventListener('click', function(e) {
        e.preventDefault();
        chatInterface.classList.remove('hidden');
        // 滚动到底部
        chatMessages.scrollTop = chatMessages.scrollHeight;
      });
      
      closeChat.addEventListener('click', function() {
        chatInterface.classList.add('hidden');
      });
      
      // 发送消息
      function sendUserMessage(text) {
        if (!text.trim()) return;
        
        // 创建用户消息气泡
        const userBubble = document.createElement('div');
        userBubble.className = 'chat-bubble user';
        userBubble.innerHTML = `<p>${text}</p>`;
        chatMessages.appendChild(userBubble);
        
        // 清空输入框
        messageInput.value = '';
        
        // 滚动到底部
        chatMessages.scrollTop = chatMessages.scrollHeight;
        
        // 模拟客服回复
        setTimeout(() => {
          const botBubble = document.createElement('div');
          botBubble.className = 'chat-bubble bot';
          
          // 根据问题提供不同回复
          let reply = '感谢您的咨询，我们的客服人员将尽快为您解答。';
          
          if (text.includes('退款')) {
            reply = '您可以在"我的订单"中找到需要退款的订单，点击"申请退款"按钮，填写退款原因后提交申请。我们的客服人员会在24小时内处理您的退款申请。';
          } else if (text.includes('修改订单') || text.includes('改订单')) {
            reply = '订单提交后，如需修改订单信息（如服务时间、地址等），请尽快联系在线客服或拨打客服电话400-123-4567。已开始服务的订单可能无法修改，请理解。';
          } else if (text.includes('未按时') || text.includes('迟到')) {
            reply = '非常抱歉给您带来不便。请您提供订单号，我们会立即联系服务人员了解情况，并给您妥善的解决方案。';
          } else if (text.includes('会员')) {
            reply = '邦伴会员分为银卡、金卡和钻石卡三个等级，不同等级享受不同折扣和特权。您可以在"会员中心"查看详细的会员权益，并选择适合您的会员套餐进行购买。';
          }
          
          botBubble.innerHTML = `<p>${reply}</p>`;
          chatMessages.appendChild(botBubble);
          
          // 滚动到底部
          chatMessages.scrollTop = chatMessages.scrollHeight;
        }, 800);
      }
      
      sendMessage.addEventListener('click', function() {
        sendUserMessage(messageInput.value);
      });
      
      messageInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
          sendUserMessage(messageInput.value);
        }
      });
      
      // 快捷问题点击
      quickQuestions.forEach(question => {
        question.addEventListener('click', function() {
          sendUserMessage(this.textContent);
        });
      });
    });
  </script>
</body>
</html> 